<template>
  <el-dialog
    width="500px"
    :title="form.id ? '编辑分类' : '添加分类'"
    :visible.sync="dialogVisible"
    :before-close="dialogClose"
  >
    <el-form ref="form" :inline="true" :model="form" class="resource-dialog">
      <el-form-item prop="name" label="名称：">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="排序：">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="dialogSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Form } from 'element-ui';
import Vue from 'vue';

export default Vue.extend({
  name: 'CreateOrEditCategory',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    categories: {
      type: Object,
    },
  },
  watch: {
    dialogVisible: function() {
      if (this.dialogVisible) {
        this.form = Object.assign(this.form, this.categories);
      }
    },
  },
  data() {
    return {
      resourceCategories: [] as { [key: string]: string | number }[],
      form: {
        name: '',
        sort: 0,
      },
    };
  },
  methods: {
    dialogClose() {
      this.$emit('close');
      (this.$refs.form as Form).resetFields();
    },
    dialogSubmit() {
      this.$emit('submit', this.form);
    },
  },
});
</script>

<style lang="scss">
.resource-dialog {
  .el-form-item__label {
    width: 150px;
  }
  .el-form-item__content,
  .el-select {
    width: 250px;
  }
}
</style>
